<template>
	<view class="kind">
		<!-- #ifdef APP-PLUS -->
			<view class="status_bar"><!-- 这里是状态栏 --></view>
			<!--#endif   -->
		

		<view class="top">
			<view class="top-icons">
				<image class="img chat" :src="chat" mode=""></image>
				<image class="img search" :src="search" mode=""></image>
				<image class="img cart" :src="cart" mode=""></image>
			</view>
		</view>

		<view class="background">
			<!-- 内容 -->
			<navigator v-if="list.length > 0" class="block chuangyi" :url="'./product/index?kindId=' + list[0].id">
				<view class="text">
					<view class="ctitle">{{ list[0].ctitle }}</view>
					<view class="etitle">{{ list[0].etitle }}</view>
				</view>
				<image class="img" :src="list[0].img" mode="scaleToFill"></image>
			</navigator>
			<navigator v-if="list.length > 0" class="block decoration" :url="'./product/index?kindId=' + list[1].id">
				<view class="text">
					<view class="ctitle">{{ list[1].ctitle }}</view>
					<view class="etitle">{{ list[1].etitle }}</view>
				</view>
				<image class="img" :src="list[1].img" mode="scaleToFill"></image>
			</navigator>

			<view class="left">
				<navigator v-if="list.length > 0" class="left style" :url="'./product/index?kindId=' + list[2].id">
					<view class="text">
						<view class="ctitle">{{ list[2].ctitle }}</view>
						<view class="etitle">{{ list[2].etitle }}</view>
					</view>
					<image class="img" :src="list[2].img" mode="scaleToFill"></image>
				</navigator>

				<navigator v-if="list.length > 0" class="left ceiling" :url="'./product/index?kindId=' + list[3].id">
					<view class="text">
						<view class="ctitle">{{ list[3].ctitle }}</view>
						<view class="etitle">{{ list[3].etitle }}</view>
					</view>
					<image class="imgs" :src="list[3].img" mode="scaleToFill"></image>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
import chat from '@/static/icons/chat.png';
import cart from '@/static/icons/cart.png';
import search from '@/static/icons/search.png';
export default {
	data() {
		return {
			list: [],
			chat,
			cart,
			search
		};
	},
	created() {
		this.getList();
	},
	methods: {
		getList() {
			uni.request({
				url: 'http://bufantec.com/api/leju/front/kind/list', //仅为示例，并非真实接口地址。

				success: res => {
					// console.log( "list",res.data);
					this.list = res.data.data;
					this.text = 'request success';
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.kind {
	background: #354e44;
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background: #354e44;
	}

	.top {
		width: 100%;
		height: 120rpx;
		margin-top: -30rpx;
		background: #354e44;
		.top-icons {
			padding-top: 50rpx;

			.img {
				width: 42rpx;
				height: 42rpx;
			}
			.img.chat {
				margin-left: 42rpx;
			}

			.img.search {
				margin-left: 540rpx;
			}
			.img.cart {
				margin-left: 37rpx;
			}
		}
	}
	// 背景色
	.background {
		background: #f1ece7;
		box-shadow: 0 16rpx 24rpx 0 rgba(83, 66, 49, 0.08);
		border-radius: 40rpx;
		border-radius: 40rpx;
		padding-top: 40rpx;
		.block {
			width: 670rpx;
			height: 302rpx;
			background: #d5d5d5;
			box-shadow: 0 12rpx 20rpx 0 rgba(83, 66, 49, 0.05);
			border-radius: 20rpx;
			border-radius: 20rpx;
			margin: 0 auto;
			.text {
				position: absolute;
				margin: 140rpx 0 0 52rpx;
				.ctitle {
					font-family: PingFangSC-Semibold;
					font-size: 48rpx;
					color: #3e3e3e;
					letter-spacing: 3.43rpx;
				}
				.etitle {
					font-family: PingFangSC-Regular;
					font-size: 30rpx;
					color: #7f7f7f;
					letter-spacing: 2.14rpx;
				}
			}
			.img {
				width: 416rpx;
				height: 252rpx;
				margin: 50rpx 0 0 245rpx;
			}
		}
		.block.decoration {
			background: #ffffff;
			margin-top: 40rpx;
		}
		.left {
			display: flex;
			// display: -webkit-flex;
			background: #f1ece7;
			// -webkit-justify-content: space-around;
			justify-content: space-around;
			.left.style {
				margin-top: 40rpx;

				background: #ffffff;
				height: 442rpx;
				width: 311rpx;
				box-shadow: 0 12rpx 20rpx 0 rgba(83, 66, 49, 0.03);
				border-radius: 20rpx;
				border-radius: 20rpx;
				// margin: 0 auto;
			}
			.img {
				width: 312rpx;
				height: 392rpx;
				padding-top: 50rpx;
			}
			.text {
				position: absolute;
				margin-top: 280rpx;

				z-index: 9;
				.ctitle {
					font-family: PingFangSC-Semibold;
					font-size: 48rpx;
					color: #3e3e3e;
					letter-spacing: 3.43rpx;
					margin-right: 157rpx;
				}
				.etitle {
					font-family: PingFangSC-Regular;
					font-size: 30rpx;
					color: #7f7f7f;
					letter-spacing: 2.14rpx;
				}
			}
			.left.ceiling {
				margin-top: 40rpx;
				/*#ifdef APP-PLUS*/
				padding-bottom: 230rpx;
				/*#endif*/

				.imgs {
					width: 312rpx;
					height: 442rpx;
					// padding-top: 50rpx;
				}
				.text {
					position: absolute;
					margin-top: 280rpx;

					z-index: 9;
					.ctitle {
						font-family: PingFangSC-Semibold;
						font-size: 48rpx;
						color: #3e3e3e;
						letter-spacing: 3.43rpx;
						margin-right: 157rpx;
					}
					.etitle {
						font-family: PingFangSC-Regular;
						font-size: 30rpx;
						color: #7f7f7f;
						letter-spacing: 2.14rpx;
					}
				}
			}
		}
	}
}
</style>
